<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Dair.Icon</title>
<link href="css/Icon.css" rel="stylesheet" type="text/css"></link>
<link href="../js/dijit/themes/tundra/form/Button.css" rel="stylesheet" type="text/css"></link>
<script>
djConfig={
	isDebug:true, 				// true debugs to Console or terminal, false, no output
	parseOnLoad: true, 
	airConfig:{
		terminal:false,			// logs to terminal window, does not open Console
		debuggerKey:119,		// the keyCode that opens the Console (doesn't really work)
		introspectorKey:118, 	// the keyCode that opens the Console 
		showTimestamp:false,	// whether to show a timestamp on every line
		showSender:false		// whether to show the file on every line
	}
}

</script>
<script src="../js/dojo/dojo.js"></script>

<script>

dojo.require("dair.AIR");
dojo.require("dair.Icon");
dojo.require("dojo.parser");
dojo.require("dijit.form.Button");

dojo.addOnLoad(function(){
	control.init();
});

control = {
	imgDojo: [		
		'icons/dojo/dojoLogo128.png',
		'icons/dojo/dojoLogo48.png',
		'icons/dojo/dojoLogo32.png',
		'icons/dojo/dojoLogo16.png'
	],
	imgDijit: [		
		'icons/dijit/dijitLogo128.png',
		'icons/dijit/dijitLogo48.png',
		'icons/dijit/dijitLogo32.png',
		'icons/dijit/dijitLogo16.png'
	],
	imgDojox: [		
		'icons/dojox/dojoxLogo128.png',
		'icons/dojox/dojoxLogo48.png',
		'icons/dojox/dojoxLogo32.png',
		'icons/dojox/dojoxLogo16.png'
	],
	
	
	
	init: function(){
		console.log("control init")
		this.icon = dair.Icon;
		if(!this.icon.initialized){
			dojo.connect(dair.Icon, "onReady", this, "init");
			return;
		}
		this.icon.animationSpeed(200);
		
		var _package = function(prefix, zeronum, startnum, amt, suffix){
			var ar = [];
			
			for(var i=0;i<amt;i++){
				var n = startnum+i, num = "";
				if(i==9 || i==99){ zeronum--;}
				for(var ii=0;ii<zeronum;ii++){
					num+="0";
				};
				ar.push(prefix+num+(startnum+i)+suffix);
			}
			return ar;
		}
		
		this.dojoFade = _package("icons/dojo/ani/dojo", 3, 1, 15, ".png");
		this.dijitFade = _package("icons/dijit/ani/dijit", 3, 1, 15, ".png");
		this.dojoxFade = _package("icons/dojox/ani/dojox", 3, 1, 15, ".png");
		
		this.setIcon('imgDojo');
		
		this.icon.setMenu({
			"Dojo Mode": dojo.hitch(this, function(){
				this.setIcon("imgDojo");
			}),		
			"Dijit Mode": dojo.hitch(this, function(){
				this.setIcon("imgDijit");
			}),
			"DojoX Mode": dojo.hitch(this, function(){
				this.setIcon("imgDojox");
			})
		});
		
		this.icon.setTooltip("Dojo, Dijit, DojoX");
		dojo.connect(this.icon, "onBlur", this.icon, "backgroundAlert");
	},
	setIcon: function(which){
		console.warn("setIcon:", which, "==", this.current, (this.current == which))
		if(this.current == which){
			console.log("setIcon: current icon.");
		}else{
			console.log("setIcon: passing:", this[which]);
			this.current = which;
			this.icon.setIcon(this[which], "both");
		}
	},
	aniLoop: function(which){
		console.warn("aniLoop:", which, "==", this.current, (this.current == which))
		if(this.current == which){
			console.warn("aniLoop toggle")
			this.icon.toggleLoop();
		}else{
			console.warn("aniLoop LOAD")
			this.current = which;
			this.icon.setIcon(this[which]).addCallback(this, function(){
				this.icon.animateLoop();
			});
		}
	},
	aniOnce: function(which){
		console.warn("aniOnce:", which, "==", this.current, (this.current == which))
		if(this.current == which){
			this.icon.toggleOnce();
		}else{
			this.current = which;
			this.icon.setIcon(this[which]).addCallback(this, function(){
				this.icon.animateOnce();
			});
		}
	}
}


</script>
</head>

<body class="tundra">
<h1>Dair.Icon</h1>
<h3>Set Icon</h3>
<button onClick="control.setIcon('imgDojo');" dojoType="dijit.form.Button">Dojo</button>
<button onClick="control.setIcon('imgDijit');" dojoType="dijit.form.Button">Dijit</button>
<button onClick="control.setIcon('imgDojox');" dojoType="dijit.form.Button">DojoX</button>
<h3>Animate Icon Loop</h3>
<button onClick="control.aniLoop('dojoFade');" dojoType="dijit.form.Button">Ani Dojo Loop</button>
<button onClick="control.aniLoop('dijitFade');" dojoType="dijit.form.Button">Ani Dijit Loop</button>
<button onClick="control.aniLoop('dojoxFade');" dojoType="dijit.form.Button">Ani DojoX Loop</button>
<h3>Animate Icon Once</h3>
<button onClick="control.aniOnce('dojoFade');" dojoType="dijit.form.Button">Ani Dojo Once</button>
<button onClick="control.aniOnce('dijitFade');" dojoType="dijit.form.Button">Ani Dijit Once</button>
<button onClick="control.aniOnce('dojoxFade');" dojoType="dijit.form.Button">Ani DojoX Once</button>

<h3>You can also:</h3>
<h3>right/control click on the dock/taskbar icon for a menu</h3>
<h3>dock icon will bounce when app is blurred</h3>

<div id="output"></div>
</body>
</html>
